// JavaScript Document
//@require Class.js
//@require Class.js

Odometro = new MyClass({
 
 	/**  
     * Property: id
     * {String} 
     */
	id: null,
	/**  
     * Property: value
     * {Integer} 
     */
	value: 0, 
	
	/**  
     * Property: valueMax
     * {Integer} 
     */
	valueMax: 0,
	
	/**  
     * Property: digits
     * {Integer} 
     */
	digits: 8, 
	/**  
	 * Property: simbols
	 * {boolean} 
	 */
	simbols: 0, 
	/**  
	 * Property: decimales
	 * {Integer} 
	 */
	decimals: 0, 
	
	/**  
     * Property: animationDiff
     * {integer} 
     */
	animationDiff: 20,
	
	//properties for digits
	digitHeight : '16px',
    digitWidth : '16px',
	
	/**  
     * Property: digitsArray
	 *   Array con elementos del dom(div) que representan los digitos.
     * {Array} 
     */
	digitsArray: null,
	/**  
	 * Property: decimalsArray
	 *   Array con elementos del dom(div) que representan los digitos.
	 * {Array} 
	 */
	decimalsArray: null,
	/**  
	 * Property: simbolsArray
	 *   Array con elementos del dom(div) que representan los simbolos.
	 * {Array} 
	 */
	simbolsArray: null,
	
	/** 
     * Property: display
     * {DOMElement} 
     */
	display: null, 
	
	/**  
     * Property: imagesURL
     * {String}
     */
	imagesURL: 'js/tablero/images/', 
	
	_isMSIE: false,

	init: function(opciones){		
		for (var key in opciones) { 
			this[key] = opciones[key];
		}		
		this.digitsArray = new Array();
		this.decimalsArray = new Array();
		var tempStr = '';
		for (var i=0; i<this.digits; i++) { 
			tempStr+='9';
		}
		this.valueMax = parseInt(tempStr);
		var agent = navigator.userAgent.toLowerCase();
		this._isMSIE = agent.indexOf("msie") != -1;
		var anchoSimbolos = 0;
		if(this.simbols){
			anchoSimbolos = 1;
			if(this.decimals){
				anchoSimbolos = 2;
			}
		}
		
		this.display = document.createElement("div");
		var anchoDiv = ((this.digits+this.decimals+anchoSimbolos) * parseInt(this.digitWidth)) 
		with (this.display.style){		
			//width = (this.digits * parseInt(this.digitWidth)) + 'px';
			width = (anchoDiv) + 'px';
			height = parseInt(this.digitHeight)  + 'px';			
			border = '1px outset gray';
		}	
		if(this.simbols){
			var simbolsDiv = this._createSimbols();
			this.display.appendChild(simbolsDiv)
			switch(this.simbols){
			case "$":
				this._setSimbols(9, simbolsDiv);
				break;
			case "C":
				this._setSimbols(7, simbolsDiv);
				break;
			case "N":
				this._setSimbols(6, simbolsDiv);
				break;
			}
		}
		for (var i=0; i<this.digits; i++){
			var digitDiv = this._createDigit();
			this.display.appendChild(digitDiv);			
			this.digitsArray.push(digitDiv);		
		}
		
		if(this.decimals){
			var simbolsDiv = this._createSimbols();
			this.display.appendChild(simbolsDiv)
			this._setSimbols(8, simbolsDiv);
			for (var i=0; i<this.decimals; i++){
				var digitDiv = this._createDigit();
				this.display.appendChild(digitDiv);			
				this.decimalsArray.push(digitDiv);		
			}
		}
	},
	
	/** 
     * Method: _createDigit
	 *	Crea un DIV representando un digito
	 * Return:
     * 	DomElement - {DIV} 
     */
	_createDigit: function(){
		var digitDiv = document.createElement('div');
		with(digitDiv.style){
			background = "transparent url("+this.imagesURL+"odometer.gif) no-repeat";
			width = this.digitWidth;
			height = this.digitHeight;
			if(this._isMSIE)
				styleFloat = 'left';
			else
				cssFloat = 'left';			
		}
		var digitOverlay = document.createElement('div');
		with(digitOverlay.style){
			if(this._isMSIE)
				filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.imagesURL+"/odometerOverlay.png')";
			else
				background = "transparent url("+this.imagesURL+"odometerOverlay.png) no-repeat";
			width = this.digitWidth;
			height = this.digitHeight;			
		}
		digitDiv.appendChild(digitOverlay);
		return digitDiv;
	},
	/** 
	 * Method: _createSimbols
	 *	Crea un DIV representando un simbolo
	 * Return:
	 * 	DomElement - {DIV} 
	 */
	_createSimbols: function(){
		var simbolsDiv = document.createElement('div');
		with(simbolsDiv.style){
			background = "transparent url("+this.imagesURL+"odometerSimbolos.gif) no-repeat";
			width = this.digitWidth;
			height = this.digitHeight;
			if(this._isMSIE)
				styleFloat = 'left';
			else
				cssFloat = 'left';			
		}
		var simbolsOverlay = document.createElement('div');
		with(simbolsOverlay.style){
			if(this._isMSIE)
				filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.imagesURL+"/odometerOverlay.png')";
			else
				background = "transparent url("+this.imagesURL+"odometerOverlay.png) no-repeat";
			width = this.digitWidth;
			height = this.digitHeight;			
		}
		simbolsDiv.appendChild(simbolsOverlay);
		return simbolsDiv;
	},
	
	/** 
     * Method: _setDigit
	 *	Representa un digito en un DIV de digito
	 * Params:
     * 	value - {int} : [0-9];
	 *  div _ {elemento del DOM en donde se desea representar el valor}
     */
	_setDigit: function(value, div){
		value = Math.abs(value - 9);
		var offsetY = -1 * value * (parseInt(this.digitHeight));
		var backgroundPosition = '0px '+offsetY+'px';		
		div.style.backgroundPosition = backgroundPosition;
	},
	
	/** 
	 * Method: _setSimbols
	 *	Representa un simbolo en un DIV de simbolos
	 * Params:
	 * 	value - {char} : [$ . , - ];
	 *  div _ {elemento del DOM en donde se desea representar el valor}
	 */
	_setSimbols: function(value, div){
		value = Math.abs(value - 9);
		var offsetY = -1 * value * (parseInt(this.digitHeight));
		var backgroundPosition = '0px '+offsetY+'px';		
		div.style.backgroundPosition = backgroundPosition;
	},
	/** 
     * Method: putDisplayIn
     *  
     * Parameters:
     * idElement - {String} 
     */
	putDisplayIn: function(idElement){
		document.getElementById(idElement).appendChild(this.display);	
	},
	
	/** 
     * Method: setValue
     *  
     * Parameters:
     * value - {float} 
     */
	setValue: function(value) {	
		//value = parseInt(value);
		var numEnteroDecimal = null;
		if (value.toFixed(2).indexOf(".") != -1) {
			numEnteroDecimal = (value.toFixed(2) + "").split('.');
		} else {
			numEnteroDecimal = (value.toFixed(2) + "").split(',');
		}
		var parteEntera = parseInt(numEnteroDecimal[0]);
		var parteDecimal = parseInt(numEnteroDecimal[1]);
		value = parteEntera;
		 
		if (value > this.valueMax) 
			return;			
		var valueSTR = value.toString();
		while(valueSTR.length < this.digits){
			valueSTR = '0'+valueSTR;
		}
		for (var i = 0; i < this.digits; i++){
			var digit = parseInt(valueSTR.charAt(i))
			this._setDigit(digit, this.digitsArray[i]);
		}
		valueDecimal = parteDecimal;
		if (valueDecimal > this.valueMax) 
			return;			
		var valueDecimalSTR = valueDecimal.toString();
		while(valueDecimalSTR.length < this.decimals){
			valueDecimalSTR = '0'+valueDecimalSTR;
		}
		for (var i = 0; i < this.decimals; i++){
			var decimal = parseInt(valueDecimalSTR.charAt(i))
			this._setDigit(decimal, this.decimalsArray[i]);
		}
	}
});